<template>
  <div class="answer">
    <el-card>
      <!-- 搜索 -->
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="学科：">
            <el-select
              v-model="params.subjectId"
              clearable
              placeholder="请选择学科"
              style="width: 120px"
            >
              <el-option
                v-for="subject in subjectList"
                :key="subject.id"
                :label="`${subject.name}(${subject.levelName})`"
                :value="subject.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
            <el-button :disabled="loading" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="answerList" style="width: 100%" :loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="paperName" label="试卷名称" min-width="200" />
        <el-table-column prop="userName" label="用户名称" width="120" />
        <el-table-column prop="userScore" label="得分" width="100" />
        <el-table-column label="题目对错" width="120">
          <template #default="{ row }">{{ row.questionCorrect }}/{{ row.questionCount }}</template>
        </el-table-column>
        <el-table-column prop="doTime" label="耗时" width="120" />
        <el-table-column prop="createTime" label="提交时间" width="180" />
      </el-table>

      <div style="margin-top: 20px">
        <el-pagination
          v-model:current-page="params.pageIndex"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import UserAPI from "@/api/system/user.api";
import { ref, onMounted, reactive } from "vue";

interface AnswerType {
  id: number;
  paperName: string;
  userName: string;
  userScore: string;
  questionCorrect: number;
  questionCount: number;
  doTime: string;
  createTime: string;
}

interface SubjectType {
  id: number;
  name: string;
  level?: number;
  levelName?: string;
}

const answerList = ref<AnswerType[]>([]);
const subjectList = ref<SubjectType[]>([]);
const total = ref(0);
const loading = ref(false);

// 查询参数
const params = reactive({
  subjectId: undefined as number | undefined,
  pageIndex: 1,
  pageSize: 10,
});

// 获取学科列表
function getSubjectList() {
  UserAPI.getSubjectList()
    .then((data: any) => {
      subjectList.value = data || [];
    })
    .catch(() => {
      // ElMessage.error('获取学科列表失败');
    });
}

// 获取答卷列表
function getAnswerList() {
  loading.value = true;
  UserAPI.getAnswerPage(params)
    .then((data: any) => {
      answerList.value = data.list || [];
      total.value = data.total || 0;
    })
    .catch(() => {
      // ElMessage.error('获取答卷列表失败');
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleQuery() {
  params.pageIndex = 1;
  getAnswerList();
}

function handleReset() {
  params.subjectId = undefined;
  params.pageIndex = 1;
  getAnswerList();
}

function handleSizeChange(size: number) {
  params.pageSize = size;
  params.pageIndex = 1;
  getAnswerList();
}

function handleCurrentChange(page: number) {
  params.pageIndex = page;
  getAnswerList();
}

onMounted(() => {
  getSubjectList();
  getAnswerList();
});
</script>

<style scoped lang="scss">
.answer {
  padding: 16px;
}
</style>
